<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转盘抽奖</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>
  <!--   <script type="text/javascript" src="js/jquery.easing.min.js"></script> -->
    <!--[if IE]>
    <script>
    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
    </script>
    <![endif]-->
</head>

<body>
        <div class="g-banner">
            <div class="banner"><img src="img/banner.png" alt=""></div>
        </div>
        <div class="wrap">
             <div class="g-top">
                <div class="m-top">  
                      <section class="m-activity">
                        <h2>抽奖规则</h2>
                        <p>1.本次活动仅限于11月11日当<br/>日使用淘宝/天猫App成功下单<br/>后参与。</p>
                        <p>2.确认收获的订单为有效，每<br/>笔有效订单对应一次抽奖机会。<br><a href="">查看我的订单</a></p>
                        <article>3.活动时间：11月13日-11月25日</article>
                    </section>
                    <div class="m-run">
                        <div class="ly-plate">
                            <div class="rotate-bg"></div>
                            <div class="lottery-star"></div>
                        </div>
                    </div>
                </div>
            </div>    
            <h1>获奖用户名单</h1>
            <section class="user clearfix">
                    <ul>
                        <li class="title">中奖ID</li>
                        <li>badq***163.com</li>
                        <li>badqvcb***163.com</li>
                        <li>badq***163.com</li>
                        <li>badq***163.com</li>
                    </ul>
                    <ul>
                        <li class="title">奖品</li>
                        <li>笔记本</li>
                        <li>手机</li>
                        <li>100元代金券</li>
                        <li>50元红包</li>
                    </ul>
            </section>
            <h1>如何领取奖品</h1>
            <section class="m-get"> 
                <p><span>[笔记本]</span> : 根据提示来领奖，工作人员核对寄出奖品，</p>
                <p><span>[免单]</span> : 根据提示来领奖，工作人员核对寄出奖品，</p>
                <p><span>[10元商品]</span> : 根据提示来领奖，工作人员核对寄出奖品，</p>
                <p><span>[5元红包]</span> : 根据提示来领奖，工作人员核对寄出奖品，</p>
                <article>注意：奖品的领取要在规定时间内完成，否则无效。<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请获奖的各位亲们要按提示尽快领取奖品。</article>
            </section>
    </div> 

<script type="text/javascript">
$(function(){
    var timeOut = function(){  //超时函数
        $(".lottery-star").rotate({
            angle:0, 
            duration: 5000,  //转的时间速度
            animateTo: 360, //这里是设置请求超时后返回的角度，所以应该还是回到最原始的位置，2160是因为我要让它转6圈，就是360*6得来的
            callback:function(){
                alert('网络超时')
            }
        }); 
    }; 
    var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
        $('.lottery-star').stopRotate();
        $(".lottery-star").rotate({
            angle:0, 
            duration: 5000, 
            animateTo: angle+360, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^
            callback:function(){
                alert(text)
            }
        }); 
    };
    
    $(".lottery-star").rotate({ 
       bind: 
         { 
            click: function(){
                var time = [0,1];
                    time = time[Math.floor(Math.random()*time.length)];
                if(time==0){
                    timeOut(); //网络超时
                }
                if(time==1){
                    var data = [1,2,3,0]; //返回的数组
                        data = data[Math.floor(Math.random()*data.length)];
                    if(data==1){
                        rotateFunc(1,157,'恭喜您抽中的一等奖')
                    }
                    if(data==2){
                        rotateFunc(2,247,'恭喜您抽中的二等奖')
                    }
                    if(data==3){
                        rotateFunc(3,22,'恭喜您抽中的三等奖')
                    }
                    if(data==0){
                        var angle = [67,112,202,292,337];
                            angle = angle[Math.floor(Math.random()*angle.length)]
                        rotateFunc(0,angle,'很遗憾，这次您未抽中奖')
                    }
                }
            }
         } 
       
    });
    
})
</script>   
</body>
</html>